<script setup>
import router from '@/router';
import {useAuthStore} from "@/stores/auth.js";
import { computed, ref, getCurrentInstance } from 'vue';
import { submitLogin } from '@/api/sign';
import { userInfoGetService } from '@/api/user.js'
import {useTokenStore} from "@/stores/token.js";
const emit = defineEmits(['toggle'])
const goBack = () => {
  router.go(-1)
}
const auth = useAuthStore()
const showPassword = ref(false)
const type = computed(() => showPassword.value ? "text" : "password")
const icon = computed(() => showPassword.value ? "fa-eye" : "fa-eye-slash")
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}
const loginForm = ref({
  phone: '',
  password: '',
  remember: false
})
const errors = ref({
  loginPhoneError: '',
  loginPasswordError: ''
})
const { proxy } = getCurrentInstance()
const validatePhone = () => {
  const phone = loginForm.value.phone.trim()
  if (!/^1[3-9]\d{9}$/.test(phone)) {
    errors.value.loginPhoneError = proxy.$t('error1')
    return false
  }
  errors.value.loginPhoneError = ""
  return true
}
const validatePassword = () => {
  const password = loginForm.value.password;
  const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/
  if (!regex.test(password)) {
    errors.value.loginPasswordError = proxy.$t('error2')
    return false
  }
  errors.value.loginPasswordError = ""
  return true
}
const tokenStore = useTokenStore();
const testSelf =  () => {
  const value = tokenStore.token;
  if(value){
    try {
      const res = userInfoGetService()
      if(res){
        auth.setLogin(true)
        router.push('/main')
      }
      else {
        auth.setLogin(false)
      }
    } catch (error){
      auth.setLogin(false)
    }
  }
}
testSelf();
const handleSubmit = async () => {
  const res1 = validatePhone()
  const res2 = validatePassword()
  if (!res1 || !res2) return

  const result = await submitLogin(loginForm.value)//调用提交登录表单API
  // 传递remember状态
  tokenStore.setToken(result.data, loginForm.value.remember);
  auth.setLogin(true)
  await router.push('/main')
}
</script>

<template>
  <form novalidate action="" @submit.prevent="handleSubmit">
    <div class="back-btn" @click="goBack">
      <i class="fas fa-arrow-left"></i>
    </div>
    <h2>{{ $t('login') }}</h2>
    <div class="input-group">
      <input type="text" v-model="loginForm.phone" @blur="validatePhone" maxlength="11" required>
      <label for="loginPhone">{{ $t('phone') }}</label>
      <span class="error-msg" v-show="errors.loginPhoneError">{{ errors.loginPhoneError }}</span>
    </div>
    <div class="input-group">
      <input :type=type v-model="loginForm.password" @blur="validatePassword" maxlength="20" required>
      <label for="loginPassword">{{ $t('password') }}</label>
      <i class="fa-solid toggle-password" :class=icon @click="togglePasswordVisibility"></i>
      <span class="error-msg" v-show="errors.loginPasswordError">{{ errors.loginPasswordError }}</span>
    </div>
    <div class="remember">
      <label>
        <input type="checkbox" v-model="loginForm.remember">
        {{ $t('remember') }}
      </label>
    </div>
    <button type="submit" id="loginBtn">{{ $t('login') }}</button>
    <div class="signup-link">
      <p>
        {{ $t('problem1') }} / {{ $t('problem2') }}
        <a href="#" class="signup-btn-link" @click.prevent="emit('toggle')">{{ $t('toRegister') }}</a>
      </p>
    </div>
    <div class="social-platform">
      <p>{{ $t('otherWay') }}</p>
      <div class="social-icons">
        <a href="#" class="social"><i class="fa-brands fa-weixin"></i></a>
        <a href="#" class="social"><i class="fa-brands fa-tiktok"></i></a>
        <a href="#" class="social"><i class="fa-brands fa-weibo"></i></a>
      </div>
    </div>
  </form>
</template>

<style scoped>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url("../../assets/styles/sign.css");
</style>